<style scoped lang="scss">
	.upload-list {
		display: flex;
		.item {
			position: relative;
			width: 80px;
			height: 80px;
			margin-right: 10px;
			border: 2px dashed $border-color-base;
			image {
				max-width: 100%;
				max-height: 100%;
			}
			.delete {
				position: absolute;
				right: -12px;
				top: -12px;
				.xyicon {
					display: inline-block;
					padding: 5px;
					font-size: 12px;
					background: #303133;
					color: #fff;
					border-radius: 50%;
					opacity: 0.8;
					transform: scale(0.7);
				}
			}
		}
		.upload-btn {
			text-align: center;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			.inner {
				.xyicon {
					margin: auto;
					width: 40px;
	    			height: 40px;
					font-size: 40px;
					color: #999;
				}
				.label {
					font-size: 12px;
					color: #999;
					width: 60px;
					margin: auto;
				}
			}
		}
	}
</style>
<template>
    <view>
		<view class="upload-list">
			<view class="item image" :key="key" v-for="(item,key) in list">
				<image @click="preview(key)" :src="item.url" mode="aspectFill"></image>
				<view class="delete" @click="deleteItem(item)">
					<text class="xyicon xyicon-close"></text>
				</view>
			</view>
			<view class="item upload-btn flex" @click="upload">
				<view class="inner">
					<view :class="icon"></view>
					<view class="label">{{label}}</view>
				</view>
			</view>
		</view>
    </view>
</template>
<script>
export default {
    name: 'XyUploadImage',
    props: {
		driver: '',
		signUrl: '',
		action: '',
		value: '',
		limit: {
			type: Number,
			default: 1,
		},
		header: {
		   type: Object,
		   default: {},
		},
		icon: {
			type: String,
			default: 'xyicon xyicon-plus',
		},
		label: {
			type: String,
			default: '',
		}
    },
    data() {
        return {
			name: 'file',
			list: [],
			data: {},
        }
    },
    created: function () {
    	if (this.limit > 1) {
    		this.list = this.value;
		} else {
			if (this.value) {
				this.list[0] = {
					url: this.value
				};
			}
		}
    },
    computed: {
    	previewUrls: function() {
    		let urls = [];
    		for (var i = 0; i < this.list.length; i++) {
    			urls.push(this.list[i].url);
    		}
    		return urls;
    	}
    },
    methods: {
    	preview(index) {
            // 预览图片
            uni.previewImage({
            	current: index,
                urls: this.previewUrls,
                indicator: 'default',
                loop: true
            });
        },
		deleteItem(item) {
			this.list.splice(this.list.indexOf(item), 1);
			if (this.limit > 1) {
				this.$emit('input', this.list);
			} else {
				if (this.list[0]) {
					this.$emit('input', this.list[0].url);
				} else {
					this.$emit('input', '');
				}
			}
		},
        upload() {
			uni.chooseImage({
				count: this.limit,
				sizeType: ['compressed'],
			    success: async (chooseImageRes) => {
			        const tempFiles = chooseImageRes.tempFiles;
					for (let i = 0; i < tempFiles.length; i++) {
						let fileExt = '';
						// #ifdef H5
		                let index = tempFiles[i].name.lastIndexOf(".");
    					fileExt = tempFiles[i].name.substr(index);
		                // #endif
		                // #ifndef H5
		                let index = tempFiles[i].path.lastIndexOf(".");
    					fileExt = tempFiles[i].path.substr(index);
		                // #endif
						let res = await this.util.uploadFile({
							driver: 'upload_oss',
							filePath: tempFiles[i].path,
							fileExt: fileExt
						});
						console.log('xy-upload-image', res);
						if (res.code == 200) {
							if (this.limit > 1) {
								this.list.push(res.data);
							} else {
								this.list = [res.data];
							}
							if (this.limit > 1) {
								this.$emit('input', this.list);
							} else {
								if (this.list[0]) {
									this.$emit('input', this.list[0].url);
								}
							}
						} else {
							uni.showToast({
								title: res.msg,
								duration: 1500
							});
						}
					}
			    }
			});
		}
    }
}
</script>
